<template>
  <div class="upload-container">
    <!-- 提示 -->
    <div class="upload-hint">
      <p>请上传您的文件，以便我们将数据批量导入系统课表。</p>
      <p>请确保文件格式正确并且大小符合要求。</p>
      <p>文件仅支持从教务处导出的系部课表，请将Excel文件第一行和第二行删除后上传。</p>
    </div>
    <el-upload
      class="upload-demo"
      drag
      :http-request="customRequest"
      :limit="1"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传Excel文件，且不超过2MB</div>
    </el-upload>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {ElLoading, ElMessage} from 'element-plus';
import {formDataApi} from "@/global.js";

// 自定义文件上传请求
const customRequest = async ({file, onProgress, onSuccess, onError}) => {
  try {
    const loading = ElLoading.service({fullscreen: true, text: '需要大量时间导入，正在处理，请稍候...'});
    const formData = new FormData();
    formData.append('file', file);

    const response = await formDataApi('/courseadjustmentmanagement/addword/', formData)
    const data = await response.json();
    if (!response.ok) {
      ElMessage(
          {
            message: data.error,
            type: 'error'
          }
      )
    } else {
      ElMessage(
          {
            message: data.success,
            type: 'success'
          }
      )
    }


    loading.close();
  } catch (e) {
    ElMessage(
        {
          message: '上传失败，请检查网络连接或联系管理员。 原因：'+e,
          type: 'error'
        }
    )
  }

};
</script>

<style scoped>
.upload-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.upload-hint {
  margin-bottom: 20px;
  font-size: 14px;
  color: #606266;
  line-height: 1.5;
}

.upload-demo {
  text-align: center;
}

.el-upload__tip {
  font-size: 12px;
  color: #909399;
}
</style>
